import {Component, createContext} from 'react'
interface Props {
    message: string
}
const  {Provider,Consumer} = createContext({name:'grandpa',age:0});

class ClassComponent extends Component<Props,Props> {
    constructor(props) {
        console.log('初始化== constructor', props.children)
        super(props)
        this.state = { message: 'hello this is class component' }
    }
    /*
    * 生命周期函数
    * 1. constructor 表示初始化阶段，将 props 传给this
    * 2. componentWillMount 初始化阶段，表示将要挂载到dom上，服务端端渲染
    * 3. componentDidMount 初始化结束 dom 已经绑定
    * 4. 更新阶段
    * 5. componentWillReceiveProps 接收父组件传过来更新的 props
    * 6. shouldComponentUpdate 子组件判断是否需要更新，返回true 更新，返回false 不更新
    * 7. componentWillUpdate 父组件将要更新 props 准备更新
    * 8. componentDidUpdate 父组件更新 props 完成
    * 9. componentWillUnmount 组件将要销毁
    * */
    componentWillMount() {
        console.log('初始化== componentWillMount服务端渲染')
    }
    componentDidMount() {
        console.log('初始化== componentDiMount客户端渲染完成 dom渲染完成')
    }
    componentWillReceiveProps(nextProps) {
        console.log('更新阶段== componentWillReceiveProps 将要更组件', nextProps)
    }
    static getDerivedStateFromProps(nextProps, prevState) {
        console.log('更新阶段== getDerivedStateFromProps 更新组件', nextProps, prevState)
        return null
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log('更新阶段== shouldComponentUpdate 是否需要更新', nextProps, nextState)

        return true
    }
    componentWillUpdate(nextProps, nextState) {
        console.log('更新阶段== componentWillUpdate 准备更新', nextProps, nextState)
    }
    componentDidUpdate(prevProps, prevState) {
        console.log('更新阶段== componentDidUpdate 更新完成', prevProps, prevState)
    }
    componentWillUnmount() {
        console.log('销毁== componentWillUnmount 组件将要销毁')
    }
    handleClick = () => {
        // console.log('点击事件')
        // this.setState({ message: '修改了值' })
        this.props.onIncrement()
    }
    emitFater = (message) => {
        this.props.onEmitFater(message)
    }
    render() {
        return (
            <div>
                {this.state.message}
                <p>{this.props.name}{this.props.count}</p>
                <button onClick={this.handleClick}>按钮</button>
                <button onClick={()=>this.emitFater('子传父组件')}>子传父组件</button>
                <Consumer>
                    {value => <p>{value.name}{value.age}</p>}
                </Consumer>
            </div>
        )

    }
}

export default ClassComponent